// 引入依赖
import Vue from 'vue'
import Router from 'vue-router'

// 引入组件，可能会很多，所有需要显示的组件都要引入
import HelloWorld from '@/components/HelloWorld'
import View1 from '@/components/view1'
import NotFound from '@/components/notFound'
import List from '@/components/list'
import Detail from '@/components/detail'
import Big from '@/components/big'
import Small1 from '@/components/small1'
const Small2 = ()=> import('../components/small2.vue')
const Axios = ()=> import('../components/axios.vue')
const Vuex = ()=> import('../components/vuex.vue')
const Element = ()=> import('../components/element.vue')
// const Foo = () => import('./Foo.vue')

Vue.use(Router)

// 导航到当前页面报错.原理：捕获这个错误，不让它显示
const routerPush = Router.prototype.push 
Router.prototype.push = function push(location) {   
  return routerPush.call(this, location).catch(error=> error)
}
// 创建一个路由实例，并抛出
export default new Router({
  // 默认是hash
  mode: 'history',
  // 路由表，路由显示的规则，就是一个简单的、严格的、刻板的字符串匹配的过程
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {title: '首页'}
    },
    {
      path: '/view1',
      name: 'view1',
      component: View1,
      meta: {title: 'View1'},
      // 路由独享的守卫，其他的路由都不管
      beforeEnter: (to, from, next) => {
        next()
      }
    },
    {
      path: '/view1view1',
      name: 'view',
      component: View1,
      alias: '/view2view2'
    },
    {
      path: '/vuex',
      name: 'vuex',
      component: Vuex
    },
    {
      path: '/element',
      name: 'element',
      component: Element
    },
    {
      // 嵌套路由，外层是父路由，内层是子路由
      path: '/big',
      name: 'big',
      component: Big,
      // children是一个数组，里面都是子组件,是完整的路由，可以继续嵌套，也可以添加重定向
      children: [
        // path不建议写`/`,写了就要从头开始，写完整的路由
        // path为空，是父组件的默认显示的子组件
        {path: '',component: Small1},
        // {path: '/big/small1',component: Small1},
        {path: 'small2',component: Small2}
      ]
    },
    {
      path: '/list',
      name: 'list',
      meta: {title: '商品列表'},
      component: List
    },
    {
      path: '/axios',
      name: 'axios',
      meta: {title: '请求示例'},
      component: Axios
    },
    {
      // 动态路由！！id的位置是一个变量，名字叫id
      path: '/detail/:id',
      name: 'detail',
      meta: {title: '商品详情'},
      component: Detail
    },
    {
      path: '*',
      // 用来处理用户随意输入的无意义的地址
      component: NotFound
    },
    // {
    //   // 通配符：*
    //   path: '*',
    //   // 重定向,值是一个字符串，地址！！用来处理用户随意输入的无意义的地址
    //   redirect: '/'
    // }
  ]
})
